<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet/less" href="./assets/css/index.less">
    <link rel="stylesheet/less" href="./assets/css/comment.less">
</head>
<style></style>

<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <a class="navbar-brand wow fadeInUp" href="#">
                <div class="r"></div>
                <div class="z"></div>
                Your Logo</a>
                <div class="search"><input type="checkbox" name="in" id="im1">
                    <label for="im1" class="image"><img src="./assets/img/1/Vector Smart Object 3.png" alt=""><input
                            type="text"></label>
                    </li>
                </div>

            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="overflow:hidden ;">


                <ul class="nav navbar-nav navbar-right" style="
        text-transform:capitalize;
                text-align: center;
                font-size: 15px;">
                    <li class="home wow fadeInUp" data-wow-delay=".1s"><a href="./index.html">Home</a></li>
                    <li class="wow fadeInUp" data-wow-delay=".2s"><a href="./2.html">Portfolio</a></li>
                    <li class="wow fadeInUp" data-wow-delay=".3s"><a href="./3.html">About</a></li>
                    <li class="wow fadeInUp" data-wow-delay=".4s"><a href="./4.html">Contact</a></li>
                    <li class="blog wow fadeInUp" data-wow-delay=".5s"><a href="#">Blog</a></li>
                    </li>
                    <li class="search wow fadeInUp" data-wow-delay=".6s">
                        serarch
                        <input type="checkbox" name="in1" id="im">
                        <label for="im" class="image"><img src="./assets/img/1/Vector Smart Object 3.png" alt=""><input
                                type="text"></label>

                    </li>
                </ul>

            </div>
        </div>
        </div>
    </nav>
    <!-- good -->
    <div class="good">
        <input type="radio" name="radio1" id="rad1" checked />
        <div class="slider">
            <div class="title wow fadeInUp" data-wow-delay=".2s">
                Good Design Is Good Business
            </div>
            <div class="content wow fadeInUp" data-wow-delay=".3s">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. <br> 
                Ut eget eros mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
            </div>
            <div class="learn wow fadeInUp" data-wow-delay=".4s">
            learn more
            </div>
        </div>
        <input type="radio" name="radio1" id="rad2"  />
        <div class="slider" >
            <div class="title">
                Good Design Is Good Business
            </div>
            <div class="content">
               s urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
            </div>
            <div class="learn">
            learn more
            </div>
        </div>
        <input type="radio" name="radio1" id="rad3"  />
        <div class="slider">
            <div class="title">
                Good Design Is s
            </div>
            <div class="content">
                Ls mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
            </div>
            <div class="learn">
            learn more
            </div>
        </div>
        <input type="radio" name="radio1" id="rad4"  />
        <div class="slider">
            <div class="title">
                Good Design Is iness
            </div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. <br> 
                Ut eges, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
            </div>
            <div class="learn">
            learn more
            </div>
        </div>
        <input type="radio" name="radio1" id="rad5"  />
        <div class="slider">
            <div class="title">
                Good Design Is Gs
            </div>
            <div class="content">
                Lor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. <br> 
                Ut eget eros mauris, ut cursus urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
            </div>
            <div class="learn">
            learn more
            </div>
        </div>
        
        <div class="dots wow fadeInUp" data-wow-delay=".6s">
            <label class="dot" for="rad1" id="ra1"></label>
            <label class="dot" for="rad2" id="ra2"></label>
            <label class="dot" for="rad3" id="ra3"></label>
            <label class="dot" for="rad4" id="ra4"></label>
            <label class="dot" for="rad5" id="ra5"></label>
        </div>
    </div>
    <!-- services -->
    <div class="services">
        <div class="title">
            our services
        </div>
        <div class="content">
            <div class="list wow fadeInLeft" data-wow-delay=".2s">
                <div class="ima">
                    <img src="./assets/img/1/1.png" alt="">
                </div>
                <div class="demo">
                    <h1>Web Design</h1>
                    <h3>Lorem ipsum dolor sit amet, 
                        consectetur adipiscing elit. 
                        Mauris nec ipsum at lacus 
                        commodo suscipit.<a href="">Details...</a></h3>
                </div>
            </div>
      
            <div class="list wow fadeInLeft" data-wow-delay=".3s">
                <div class="ima">
                    <img src="./assets/img/1/2.png" alt="">
                </div>
                <div class="demo">
                    <h1>Web Design</h1>
                    <h3>Lorem ipsum dolor sit amet, 
                        consectetur adipiscing elit. 
                        Mauris nec ipsum at lacus 
                        commodo suscipit.<a href="">Details...</a></h3>
                </div>
            </div>
      
        
            <div class="list wow fadeInLeft" data-wow-delay=".4s">
                <div class="ima">
                    <img src="./assets/img/1/3.png" alt="">
                </div>
                <div class="demo">
                    <h1>Web Design</h1>
                    <h3>Lorem ipsum dolor sit amet, 
                        consectetur adipiscing elit. 
                        Mauris nec ipsum at lacus 
                        commodo suscipit.<a href="">Details...</a></h3>
                </div>
            </div>
       
        
            <div class="list wow fadeInLeft" data-wow-delay=".5s">
                <div class="ima">
                    <img src="./assets/img/1/4.png" alt="">
                </div>
                <div class="demo">
                    <h1>Web Design</h1>
                    <h3>Lorem ipsum dolor sit amet, 
                        consectetur adipiscing elit. 
                        Mauris nec ipsum at lacus 
                        commodo suscipit.<a href="">Details...</a></h3>
                </div>
            </div>
        </div>
    </div>
    <!-- pro -->
    <div class="pro">
        <div class="title">
            <h1>Our Portfolio Awesome</h1>
            <button>more works</button>
        </div>
        <div class="content">
            <div class="list wow fadeInDown" data-wow-delay=".2s">
                <div class="top">
                    <div class="cen">
                    </div>
                </div>
                
                <div class="demo">
                    <h1>Lorem Ipsum Dolar Sit Amet</h1>
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Mauris nec ipsum at lacus commodo suscipit.</h2>
                </div>
            </div>
            <div class="list wow fadeInDown" data-wow-delay=".3s">
                <div class="top">
                    <div class="cen">
                    </div>
                </div>
                
                <div class="demo">
                    <h1>Lorem Ipsum</h1>
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscinglit. 
                    </h2>
                </div>
            </div>
            <div class="list wow fadeInDown" data-wow-delay=".4s">
                <div class="top">
                    <div class="bo"><div class="cen"></div>
                        <h1>Details</h1>
                    </div>
                </div>
                
                <div class="demo">
                    <h1>Ipsum Amet Dolar Sit </h1>
                    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing 
                        elitmauris nec ipsum at lacus commodo suscipit. 
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <!-- offer -->
    <div class="offer">
        <div class="title wow fadeInDown" data-wow-delay=".2s"">
            <h1>WHAT WE OFFER</h1>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies sagittis magnaa commodo. Ut eget eros mauris, ut cursus urna. 
                Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</h3>
        </div>
        <div class="content">
            <div class="list wow fadeInDown" data-wow-delay=".3s">
                <div class="top">Web Design</div>
                <div class="cen">Lorem ipsum dolor sit amet, consect 
                    etur adipiscing elit. Ut ultricies sagit
                    tism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in faucibus orci luctuset.</div>
                <button>Details</button>
            </div>
            <div class="list wow fadeInDown" data-wow-delay=".4s">
                <div class="top">Web Design</div>
                <div class="cen">Lorem ipsum dolor sit amet, consect 
                    etur adipiscing elit. Ut ultricies sagit
                    tism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in faucibus 
                    <a href="#">Details...</a>
                </div>

            </div>
            <div class="list wow fadeInDown" data-wow-delay=".5s">
                <div class="top">Web Design</div>
                <div class="cen">Lorem ipsum dolor sit amet, consect 
                    etur adipiscing elit. Ut ultricies sagit
                    tism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in faucibus orci luctuset.</div>
                <button id="b1">Details</button>
            </div>
            <div class="list wow fadeInDown" data-wow-delay=".6s">
                <div class="top">Web Design</div>
                <div class="cen">Lorem ipsum dolor sit amet, consect 
                    etur adipiscing elit. Ut ultricies sagit
                    tism agnaa commodo. Ut eget eros mauris, ut cursus urna vestibuluman ipsum primis in faucibus orci lu
                <a href="#">&gt;&gt;&gt;</a>
                </div>
                
            </div>
        </div>
        <div class="fg"></div>
        <div class="demo wow fadeInDown" data-wow-delay=".5s">
            <h1>Testimonials</h1>
            <h3>“Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris necip 
                at lacus commodo suscipit praesent sollicitudin enim vel mirhon”</h3>
        </div>
        <div class="bottom wow fadeInDown" data-wow-delay=".6s">
            <div class="ti">
                <h1>Jon Doe <p> &nbsp;/ CEO of LoremIpsum</p></h1>
            </div>
            <div class="bo">
                <div class="list">
                    <img src="./assets/img/1/Vector Smart Object.png" alt="">
                </div>
                <div class="list">
                    <img src="./assets/img/1/Vector Smart Object 2.png" alt="">
                </div>
                <div class="list">
                    <img src="./assets/img/1/Vector Smart Object.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="tw wow fadeInLeft" data-wow-delay=".2s">
            <div class="title">
                Twitter FEEDs
            </div>
            <div class="cen">
                <h1>
                    Check out this great theme item
                    
                    <a href="">http://tadjalskfj.com</a><br>
                    2 weeks ago
                </h1><div class="fg"></div>
                <h1>
                    Check out this great theme item
                    
                    <a href="">http://tadjalskfj.com</a><br>
                    2 weeks ago
                </h1><div class="fg"></div>
                <h1>
                    Check out this great theme item
                    
                    <a href="">http://tadjalskfj.com</a><br>
                    2 weeks ago
                </h1>
            </div>
            
        </div>
        <div class="new wow fadeInLeft" data-wow-delay=".3s">
            <div class="title">
                NEWSLETTER
            </div>
            <div class="cen"><h1>
                Lorem ipsum dolor sit amet, consectetur adip
                iscing elit. Ut ultricies sagittis magna a comm. 
                Ut eget eros mauris, ut cursus urna.
            </h1> <div class="fg"></div>
            </div>
           
            <div class="email">
                <div class="top">Your Email Address</div>
                <input type="text">
                <button>Sign Up</button>
            </div>
        </div>
        <div class="rec wow fadeInLeft" data-wow-delay=".4s">
            <div class="title">
                recent projects
            </div>
            <div class="cen">
                <div class="zheng"></div>
                <div class="dis">
                    <h1>
                        Sketchy Business Card
                    <a href="">http://tadjalskfj.com</a><br>
                    2 weeks ago 
                    </h1>
                    
                </div>
            </div>
            <div class="fg"></div>
            <div class="cen">
                <div class="zheng"></div>
                <div class="dis">
                    <h1>
                        Sketchy Business Card
                    <a href="">http://tadjalskfj.com</a><br>
                    2 weeks ago 
                    </h1>
                    
                </div>
            </div>
            <div class="fg"></div>
            <div class="cen">
                <div class="zheng"></div>
                <div class="dis">
                    <h1>
                        Sketchy Business Card
                    <a href="">http://tadjalskfj.com</a><br>
                    2 weeks ago 
                    </h1>
                    
                </div>
            </div>
        </div>
        <div class="con wow fadeInLeft" data-wow-delay=".5s">
            <div class="title">
                Contact
            </div>
            
                <div class="list">
                    <img src="./assets/img/1/5.png" alt="">
                    <div class="demo">
                        1 - 000 - 000-0000 <br>
                        1 - 000 - 000-0000
                    </div>
                </div>
                <div class="list">
                    <img src="./assets/img/1/Shape 54.png" alt="">
                    <div class="demo">
                        1 - 000 - 000-0000 <br>
                        1 - 000 - 000-0000
                    </div>
                </div>
                <div class="list">
                    <img src="./assets/img/1/Shape 53.png" alt="">
                    <div class="demo">
                        abcdefg@hijs.dfh <br>
                        fjashfaf@jkfs.ckd   
                    </div>
                </div>
            
        </div>
    </div>
</body>

</html>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/less.min.js"></script>
<script src="./assets/js/wow.min.js"></script>
<script>
    new WOW().init();
</script>